<template>
    <div>地图示例</div>
    <div id="container"></div>
</template>

<script setup>
import { onMounted } from 'vue';


onMounted(() => {
    // // 创建地图实例
    // var map = new window.BMapGL.Map('container')

    // // 中心点坐标
    // var point = new window.BMapGL.Point(104.04766, 30.636829)

    // // 地图初始化，同时设置地图展示级别
    // map.centerAndZoom(point, 18)

    var map = new BMapGL.Map('container');
    map.centerAndZoom(new BMapGL.Point(104.04766,30.636829), 17);
    map.enableScrollWheelZoom(true);
    // 创建点标记
    var marker1 = new BMapGL.Marker(new BMapGL.Point(104.04766, 30.636829), {
        enableDragging: true
    });
    // 在地图上添加点标记
    map.addOverlay(marker1);

    /* 步行路线规划 */
    var walking = new BMapGL.WalkingRoute(map, {
        renderOptions: {
            map: map,
            autoViewport: true
        }
    });
    walking.search('肖家河大厦', '高升桥地铁站');
})
</script>

<style>
#container {
    width: 800px;
    height: 800px;
}
</style>